CSS5 WEB DESIGN 


CHEAT SHEET 


Created by @Manz ( 


C CSS Syntax 


GENERAL SYNTAX 


Evataleyeicss) 


| EEA 


S CSS Selectors 
SELECTORS & COMBINATORS 

element with id="unique" 
[i elements with class="c1" 

all elements inside of div (universal) 
i inner div elements inside of div (descendant) 
direct childs of div (child) 
adjacents elements (adjacent sibling) 
9 siblings elements at same level (general sibling) 
ATTRIBUTES IGNORE CASE SENSITIVE |fattr= 
[Aig elements with attr attribute present 
[Aiuemcley elements with attr= attribute with value val val 
[Ame le) elements with attr~= that contains val EVTSVaIES 74 
[Acubacee) elements with attr/= that contains es-* EIEUSSS#ESi 
elements with attr*= that includes val REC TiMaIei sees 


FXuuem'e le) elements with attr’= that begins with val RatCS eS 
Feel elements with attr$= that ends with val 


PSEUDOCLASSES 

Elia links that have not yet been visited 

Bieicel links that has been visited 

Eta user move mouse/pointer over element 

Feta element is being activated by user 

1 Bietatey element has the focus (foreground) 

on/off input state 

Beitss.cx:) elements toggled "on" by user 

input on indeterminate state 

readonly input or modifiable 

inputs that shows placeholder at now 

default elements for form (input, option, ...) 

Be) Bic) userdata pass/not pass check validation 

Brecher) userdata in range/out of range 

elements required/optional for submit 

first child of group of elements ~—IQRSMLI@) 

BrSieenie) last child of group of elements ~—IUEER anu) 

n‘ child of group of elements nTer 
: iexen) 

last n" child of group of elements [|_Eaal 

unique child 4 :first-child:last-child 

first child of same type 

last child of same type 

n" child of same type 

last n" child (same type) 

unique child (same type) 

Eitaa root element of the document 

element without contents 

not match by x selector 

Belcia is the target of anchor URL 


aEle1e4) elements in x language 


PSEUDOELEMENTS 
first line of text element 
Mileii (sm first letter of text element 


Enezetataail 


.class|:pseudoclass|::pseudoelement ff 


COMMENTS (ANNOTATIONS) 


EXAMPLE /* IE sucks */ 


LINKS 


USER INTERFACE 


STRUCTURAL 
CHILD ELEMENTS 


CHILD OF SAME TYPE 


legend 


optional keyword 


n 
a 
Ww 
z= 
[e) 


OTHERS 











CSS SYNTAX, COLORS & UNITS 


a 
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C CSS Colors 
COLOR PROPERTIES 
color: Eeytya 
opacity: IJ ETIE 


jefe] Ke) >a (eo) 2) 4B 
KEYWORDS 


NUMERIC FORMAT 

RGB( FC), Eigen Ca) 

+ Ed Pied Pm 
HSL( Gta, Rete, ios ) 


WITH ALPHA CHANNEL 


COLOR EXAMPLE 
[RGB [237 F630 
+ PE + KEE - 





EXAMPLES 

RGB(65, 106, 225) 
short form: #46E 
HSL(159, 185, 145) 
EXAMPLES 

RGBA(65, 106, 225, 0.5) 


#416AE1 


RGBA( FE], Fite, Et Boel) 
HSLA( (ita, Batten, Dreitatess, EVSeW) HSLA(159, 185, 145, 1) 


oo] He) ee) te) ES 


Geel icaicitc) numeric value between [0...255] [a 
ee modiccume€ Clttmatsd hexadecimal value [00 ... FF] 
numeric value (degrees) between [0 ...360deg] FU 
PRCrcnu tiie percentage values [0%...100%] Ii 
EViiey number value between [0.0 ... 1.0] _ 


IMPORTANT 


RESETTING ALL PROPERTIES property: ‘value | 


EXAMPLE Color:red!important; 


COMMON VALUES 
property's initial value 
computed value on parent 
initial or inherit (depending) 
FONT-RELATIVE SIZES 
computed value on current 
x-height of lowercase "x" 
advance measure of "0" glyph 
computed value on root elem 
PAN =-10] RU go) 74 =) 

[sq pixels 
centimeters 
millimeters 

quarter-mm 

inches 
picas 
points 


V CSS Values & Units 


MATHEMATICAL EXPRESSIONS 


EXAMPLE Calc(200px + 10%) 


VIEWPORT SIZES 
viewport width % 
viewport height % 
smaller (vw or vh) 
larger (vw or vh) 
DURATIONS 
Ea seconds 
millisecs 


rN (eq SS 
CEty degrees [0..360] 
gradians [0..400] 
radians [0..6.28] 
turns [0.0..1.0] 


CUSTOM PROPERTIES (CSS VARIABLES) 
DECLARING USING 


e e 
be J 


EXAMPLE --Size: 100px; 


PERCENTAGES 


EXAMPLE 75% 


varname fallback 


EXAMPLE Calc(var(--size, 50px) * 2); 


M CSS Media Features 
VIEWPORT SIZE 


|B) =A 4 (et SS) 4 
MONG width 


EY2) | cum device-width size 
2) | cum device-height Era 


Motz height 


ASPECT RATIO 


[MN aspect-ratio FAV) pom device-aspect-ratio FFT 


Loco] He) =e) 





Mmm color = ifiet9 | mum color-index number | 


OTHERS 


[MM monochrome [filing 


EXAMPLES 
device-min-width: 640px 
device-aspect-ratio: 16/9 
max-color-index:256 
min-resolution:300dpi 
min-monochrome:2 
grid:1 


MN resolution 
orientation 
scan 

grid 


CSS5 WEB DESIGN 


CHEAT SHEET 


Created by @Manz ( 













GENERIC FONT 


‘serif | sans-serif |cursive |fantasy | monospace 


EXAMPLE font-family: Verdana, Arial, sans-serif: 
FONTS (TYPOGRAPHY) 


font-family: FETS), Eee), CeATS).., RSET 
font-size: 


A medium| 
font-size-adjust: fait 


font-style: Bir) 

font-synthesis: BQit 

font-variant: Rita 

font-weight: ERT 
E 


‘i= Style | variant | weight | stretch | size/ |line-height | family 
caption |icon|menu |message-box |small-caption|status-bar 


https: //fonts.googleapis.com/css? fami ly=Open+Sans : 300 , 400 | Roboto: 400 


S Speech Media 


VOLUME/SPEAK 


volume: fiffinssaka 
speak: Earl 

PAUSE 

pause-before: [ik 
pause- -after: 0 | time |%) 


5) before after zene Bric 
| 'MIXING/SPATIAL 


play-during: Effics 
azimuth: El belt 


elevation: Fae 


VOICE CHARACTERISTICS 


speech-rate: [iE medium) 


voice-family: RP seeS), Maret), Nee)... 
pitch: medium 

pitch-range: Eq) 

richness: EQ) Eye 
stress: EQ) 

SPEECH 

speak-punctuation: Eft 
speak-numeral: Peynantetey 
speak-header: Putts 


@ CSS Rules 


FONT LOADING 
@font-face { 
font-family: fd; 
ste wot) 
; 


unicode-range: | |" :000 27FF ; 


GENERIC VOICE 


EXAMPLE voice-family: Romeo, male; 













@media EY] 


property: value; 








CSS IMPORT RULES 


} 


FONT FORMATS 


embeded-opetpe] buelype]opotpe] av wot wot 








EXAMPLE url(file.ttf) format("truetype"); 


Enezetataail 








CUE 
cue-before: Ef! Mild min 
cue-after: Rit snd.mp3 





Media features 


EXAMPLE @media screen and (max-width: 640px) {... 


@import "index.css"; 
@import url("index.css"); 
@import url("print.css") print; 


FONTS, TEXT, SPEECH & RULES 


https://lenguajecss.com/ 


T CSS Text L3 


TRANSFORMING TEXT 
text-transform: [fit 


WHITE SPACES 


white-space: ffuiueu 
tab-size: EMule 
LINE BREAKING & WORD BOUNDARIES 
line-break: Effiey 
word-break: ffeil 


BREAKING WORDS 

hyphens: | manual | 
word-wrap: Deas 
overflow-wrap: Eine 


ALIGNMENT & JUSTIFICATION 
text-align: 
text-align-last: Effics 
text-justify: Efiicy 

SPACING 

word-spacing: ffuauree 
letter-spacing: [fire 
EDGE EFFECTS 

text-indent: E72) 


hanging-punctuation: Eira 


T CSS Text Decoration 
BV, 5 By (Bh e7-Xou'd) 


text-decoration: Eira 


LEVEL 3 
text-decoration-line: Bits 


text-decoration-color: tfneucelem teloe 


text-decoration-style: Et] 
text-decoration-skip: objects 


none | line | style | color 


| STATUS 
exe andenine- -position: Effics 


EMPHASIS MARKS 


text-emphasis-style: Fits Gan:) 
text-emphasis-color: Blfreunceom coloe 
text-emphasis-position: EYfg right 


hasis: Bee 
TEXT SHADOW 


text-shadow: TRIS Sesosi a ead 


serif font monospaced font 
sans serif font fantasy font 





MEDIA QUERIES (RESPONSIVE DESIGN) 


and (...) { 
| 


LINE HEIGHT CALCULATIONS (LEGACY) 


line-height: fi fniekale- Utell 
vertical-align: SyGyapeEsaints 


CSS CONDITIONAL 


@supports FE9 (MEST ) EET ... { 


property: value; 


EXAMPLE @supports not ( display: flexbox ) { .nav { display:block } } 


font-family: @seriffopses 
-size: 22 


| } fon z px; 

padding: 2px; 
bord 
max- 

} 

input[type=submit 
background: 
sarg 4en; 

add 4px 
fon n 
font-s} 
1 


CHEAT SHEET BOX MODEL: BORDERS, BACKGROUNDS & IMAGES 


Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/ 





B CSS Box Model B CSS Borders 

DIMENSIONS BORDERS border-top-* 
width: Effies Brak height: EMG Ak border-width: EP) Ei Eieenta cae border-right-* 
min-width: BEA min-height: fi) ETZI4 border-style: FERAL Ease licke | border-bottom- 
max-width: ERTS Sra max-height: Fits frcaka border-color: Effrueeleg (else border-left-* 


N= Led IN ISy/27-V 2) B) | Coss) SIDE BORDER SHORTHAND 
SPECIFIC MARGINS SPECIFIC PADDINGS - F 
border-top: solid 


margin-top: f}EF7Y padding-top: PETA border-right: dotted 
margin-right: [J] EFA padding-right: DP) EFA border-bottom: 

margin-bottom: EJETAEA padding-bottom: [Era border-left: ree 
margin-left: [EFA padding-left: [] EFA) SRINZOGETGAND double 


MARGIN SHORTHAND PADDING SHORTHAND border: ee groove 
J tide 
Sm ecolurate(=\o Mm Oxe)aa(-)e> Cc inset 
SPECIFIC CORNERS outset 
border-top-left-radius: (] EFA ——_—_ 


OVERFLOW/VISIBILITY ; . = 
border-top-right-radius: (JRA 


pcb leh Ait le border-bottom-left-radius: (EFA 


overflow: MAIN SHORTHAND 


visibility: FRSTA ieee Peles border-radius: 


o ape 
EESVELSS --“teize-v 
1-PARAMETER 


size-h = size-v _size-h 


display: FREY ST 
2| inline-block| block 
§linline-list-item|list-item content ae 7 

inline-table| table |table-cell border-radius: / border-radius 


padding { top 
Beg | a “a 


B CSS Border Image bottom 
BORDER IMAGE 


border-image-source: [yrs (idiirer itd) 
border-image-slice: 
border-image-width: [] 


MAIN SHORTHAND WITH HORIZONTAL/VERTICAL RADIUS 











I CSS Images 


GRADIENTS 
H ce) 
LINEAR GRADIENTS SIZe % . . 
repeating-linear-* 


background-image: 

linear-gradient(| direction |color1|start color2| start Fim) 
RADIAL GRADIENTS 
background-image: 

radial-gradient(| shape |rsize |at pos|color1|start Jcolor2 Bi) 


border-image-outset: [i] 


border-image-repeat: Eee) (Sei eM ET 


border-image: 


repeat |space | round |no-repeat| 


B Backgrounds 
EXAMPLE repeat no-repeat (or repeat-x) 


LEVEL 2 


background-color: Feuer ried ellen 

background-image: EEGE) | MiGnEr END), PGES EN SD), ... 
background-repeat: 
background-attachment: Efigyi fined ere) 


325deg 35deg 
EXAMPLE (ellipse 55px 45px at top, red, blue) 


farthest-side 
farthest-corner 


WW Xe] NN Xe) = 5) 04 to bottom f ight 
SIZING 


object-fit: GT) Siren) ed REE EEE ei 
object-position: 

IMAGE PROCESSING 

image-orientation: DEEtI ETA 

image-resolution: PRT) Sa (ities ass eae) 
image-rendering: EMM) is atshes Pecere 


270deg 
yma beYe(-To Mm - teYe(-Ye) 


background-position: Fb 4 [ln e 


background: 
LEVEL3 


background-clip: padding-box 
background-origin: padding-box 
background-size: ETE MIE Gio] CE 


background: 
EFFECTS: SHADOWS 


box-shadow: ERAGE ess se Ea rz eid ee 





CHEAT SHEET EFFECTS, MASKS, SHAPES, LISTS & UI 


Created by @Manz ( https://lenguajecss.com/ 
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F CSS Filters C Compositing 


FILTER VALUES 


FILTER PROPERTY ‘number 0 0 1 0 
filter: ERS Gea!) Gey) ... 0% . 100% 


FILTERS 

Opx = original >Opx=blur 
0%=black 100%=original 
0%=grey 100%=original 
0%=B&W 100%-=original 
0%=original 100%=B&W 0 
invert( number % ) 0%=original 100%=invert 
0%=original 100%=sepia 2710) CE) 90 Masses 
0%=transparent 100%=original 530 

hue-rotate( angle ) Odeg=original 360deg=max 


(ele) obe-tarsle(o WU @oles-t> au olelavam )lelmmeellelm@y (Same as text-shadow) 
REFERENCE BOX 


geometry-box fej shape-box 
shape-box [aq box | 
[box Fe 


S CSS Shapes 


ed RON NS WS ad 


shape-outside: Eur re are) 
shape-image-threshold: (Xa) i) 7-9 
shape-margin: (/EFAMY4 


BASIC SHAPES 
RECTANGLE 


inset( Ee)s) GIy Eel Led eI ) 
CIRCLE/ELLIPSE 

circle( EXE eictetey Eid YES) ) 

ellipse( ERITES ERIE Et [Sie 


40) B (ele) 


: SHAPE RADIUS 
polygon( FO) RT), ..., EAN) 


M CSS Masks 
CLIPPING SHAPE 


clip-path: ETE! Mier) 


POSITIONED MASKS 


mask-image: ERIS 
mask-mode: 

mask-repeat: 
mask-position: PERT CET eT eres) 
mask-clip: 
mask-origin: 
mask-size: ERY PERI in mercy 


mask-composite: Eff] 

image | mode | position |/ size| repeat | clip | composite 
= 1@) 1B) oo 10) GAN) 
mask-border-source: Eft 
mask-border-mode: Ellard 
mask-border-slice: [Efe Riaiin cecle 
mask-border-width: Effies [Yr Parc ce iu) 
mask-border-outset: []ETICESM re ceneas 
mask-border-repeat: Fligieal binc min: cee sae 


source |siice|/ width|/ outset|repeat| mode 


COMPOSITING AND BLENDING 


background-blend-mode: Ef urliauch 
isolation: Efficy 
mix-blend-mode: Eine lsc 


BLEND MODES 
SEPARABLE 





















L Lists 
YRS 


list-style-image: Fit img.jpg 
outside 


list-style-position: 
list-style-type: EIR 





=¥) type | position | image 
- GENERATED CONTENT a 


content: FETE img.jpg attr )[é]' string 
name  list-style-type 
name 


content-increment: 
content-reset: ffi) 
quotes: [RUE iam Welss-aiun 


MARKERS 
Biurivca item's marker generated by list item (bullet, number...) 


marker-side: [&@icual 


U User Interface 

sto) @(e)2) 18 

box-sizing: 

OUTLINE 

outline-width: Br2) fin Gents 
outline-style: Efity 


outline-color: invert |color 
 outline-offset: [ETA 


DUTIIMG: Cele) fe aE yA elt 
1-174 (eV =1 7 Re) 


resize: Efe 
text-overflow: filly string] 


POINTING DEVICES AND KEYBOARDS 


cursor: Ettiey 














PSEUDOCLASSES 
mel-jiele-m before element 


Eelica after element 


E. AMPLE p::before { content: "-", } 








caret-color: Effitateciss 
nav-up: Effies [it 
nav-down: Effies [tl 
nav-left: ET] 


Enezeta taal nav-right: Effies [ft] 





borde! Piebat Spx; 
font-family: @seriffogne. 
font-size: 22px; 
padding: 2px; 
bord 
max- 

} 

input(type=sudmit) { 
background: | 
margin: .4em; 

x 4 
y:@seriffon 
2px 


CHEAT SHEET TRANSITIONS, ANIMATIONS, TRANSFORMS, MOTIONS, SNAP & COLUMNS = 


Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/ 


T CSS Transitions T CSS Transforms 
TRANSITIONS TRANSFORM PROPERTY 


transition-property: El fen fessusal,focosnas 7, ... transform: BR Eeieieins Couey ... 
transition-duration: PAE 2D TRANSFORMS 

transition-timing-function: ERB finned transform: 
transition-delay: PATTIE transform: 


transition: transform: size %, size % 


Ce MSI | | Pee Rca | “ansfore": 
's | f | s ease) (0.25, 0.1, 0.25, 1) | | Braet (1, start) ae 

rnin {n #ilinear| (0.00, 0.0, 1.00, 1) (1, end) | | transform: number , number 
BOG ESS (0.42, 0.0, 1.00, 1) (n, end) | | transform: 

in{n{s| (0.00, 0.0, 0.58, 1) (a, b) | | transform: 

's[n]s, (0.42, 0.0, 0.58, 1) transform: angle , angle 
transform: 

transform: THEW G4 eo) 
3D TRANSFORMS 


transform: 

transform: size 
transform: 

transform: number , number , number 
transform: 


transform: [OEE 
transform: eCy4@ tele) 


transform: number , number , number , angle 


transform: Pag ven 7 4ew) 
transform: —THELUhe se G 4 ee eo) 
TRANSFORMS OPTIONS 


transform-origin: EQAEIA Tess (eesa ee 
transform-style: GER iceencect) 
backface-visibility: FETT cen 


PERSPECTIVE OPTIONS 












A CSS Animations 
ANIMATIONS 


animation-name: fit feucew, feu), ... 
animation-duration: PATE 
animation-timing-function: E&eed hui: eature den 
animation-delay: DAEint 

animation-iteration-count: [isa tne 
animation-direction: Effie 

animation-fill-mode: Efi loa cus Leela) 
animation-play-state: itiurel cae 


animation: 


CHAINED (ANIMATION PROPERTY) ANIMATION KEYFRAMES 


@keyframes ETVANETAT { 


{ property: value; ... } 
{ property: value; ... } 


@-vendor-keyframes 





0% = from 
VW merssom VW Celieamarcyitsm 100% =to 


MOTION PATH perspective: none | size 
motion-path: Ri: Meares perspective-origin: EUAET4 yee [sea 


ti ff fe geomeliy=00X C CSS Multi Columns 
mouon-oiTset: SIZE % <i 


motion-rotation: EMicj FAA Eure column-width: Effie er2) 
motion: column-count: Efi itinae 


SCROLL SNAPPING/SNAPPORT columns: 
SNAP MARGIN/PADDING COLUMN RULES 


*-top: (IEAM column-rule-width: B72) it Eifeatia bullae 
*-right: DL] EFA column-rule-style: Evel fics 
*-bottom: f] EAM column-rule-color: Eira 


x ° ize % 
left: P) EFA column-rule: 
*- 


COLUMN BREAKS 
INTEL =7/=] Rolet.¢ 


break-before/break-after: EM Flv a ciel cust is 
*-inline-start: [EPO page|column|avoid-page|avoid-column 
*-inline-end: []EZAR | break-inside: EMP none ulm in 
*-jnline: SPANNING, FILLING AND GAPS 
*-block-start: [J Braga] Column-span: GEREIET) 
*-block-end: [Jraky | column-fill: emt) GERI 
*-block: column-gap: E72) GRiieEl 
































S CSS Scroll Snap 


CAPTURING SCROLL SNAP AREAS 


scroll-snap-type: Efrabala 
block |inline|both 


ALIGNMENT AND LIMITS 
scroll-snap-align: 


scroll-snap-stop: ffaellelie e 


SCROLL SNAPPING/SNAPPORT 
scroll-padding’*: 
scroll-snap-margin*: ————> 


EXAMPLE scroll-snap-align: start end 


Enezets Gl 























































f 
font-size: 22px; 
padding: 2px; 
bord 
max- 
} 
input[t 
bac’ nd: 
sar 4en; 


CHEAT SHEET 
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SU OLSSON a (=). 4010). 4 


CONTAINER PROPERTIES 
ORDERING AND ORIENTATION 


flex-direction: QW Memeo elites: 
flex-wrap: [fWirrdue ke) eee 


flex-flow: 
PRIMARY AXIS 


justify-content: GEYSiety ea ca ier 
| space-between space-around 
SECONDARY AXIS 


align-items: [[/EXSSein Peed ieee | PERS ES 
MULTI-LINE CONTAINER PROPERTIES 
align-content: FiEXSe etd Cire Ee) EE 


ITEM PROPERTIES 
a 41-1 


flex-grow: DJ ETT Es 
flex-shrink: DJ ETE 
flex-basis: Err ener 
flex: 

ALIGNMENT AND ORDERING 


align-self: EMR ESS eT ES ESI EES Ee) 
order: (EMILE 


A CSS Align 


CONTAINER PROPERTIES 
CONTENT DISTRIBUTION 


justify-content/align-content: 


=| normal |baseline-position 
>| space-between |space-around| space-evenly|stretch 
El overflow-pos | self-position | 
A) =] oO) BO) | 
SBeattaca cued (self, content) 
BREST fiEssued idem (only flex) 
CESRciesimcs! (self) 
Sala (self, content) fallback: start 
BASELINE-POSITION 
>| baseline |last-baseline 
PRIMARY AXIS 
justify-items: ERR IPeniel Es PERSE een 
=| overflow-pos | self-position | 
>[legacy |left|center|right 
SECONDARY AXIS 


align-items: [fim euco breclurse sesnceo 
=| overflow-pos |self-position 


ITEM PROPERTIES 
PRIMARY AXIS 


justify-self: EIRYTCITEN ETc PERSIE SET enY 
| overflow-pos|self-position 
SECONDARY AXIS 
align-self: EMTS) it irl) Ee) PERSIE Eien 
| overflow-pos|self-position 


OVERFLOW POSITION 


border-collapse: caption-side: Ralvaien) 
size-v | 


empty-cells: Efe iiel 
table-layout: Efficatine:! 


border-spacing: 


Enezetataail 


float: PERSIST Git 
clear: PEIATEG Hei ER) 


$ — 


order-radiu' 
ont-family: @serif fog. 


Kk 
9 


FLEXBOX, POSITIONING, ALIGNMENT& GRID = 


text-s! 8 8 2px 
color: 
border; 


https://lenguajecss.com/ 


P Positioning 
POSITIONING 


position: RETA SCE En Se ET 


POSITIONING (NOT STATIC POSITION) 


top: EMRE 

left: EMT 
right: EM ET 4 
bottom: Eiahy A 
z-index: Efieyitins-a 


a ROy-N EI Le: 


G CSS Grids 


CONTAINER GRIDS 
EXPLICIT GRID 


grid-template-columns: Fit tieval ieee ... 
grid-template-rows: Eitan fevwe ... 
TRACKS 


SEMEL automatic size or specific size/fraction unit 


Slits meieksrcwekia named grid lines + specific size 
Stine Quieres) min <= size range <= max 
Seatusakescs) repeat fragments n times 
Sercuicnilmiur.cs) repeated fragments and fill space 
Brructicnimuscs) repeated fragments and fit space 
>|max-content| 


largest max/min content track 


Seen) ~ min(max-content, max(auto, arg)) 


AREA GRID 


grid-template-areas: WEI WIE :V4e ... WE) Arley: V4e 
EXAMPLE 


#grid { display:grid; 
grid-template-areas: " head head" 
“nav main" 

"foot foot" } 


SEiee grid area name (grid-area) 
SI empty grid area cell 
no grid areas are defined 
SHORTHAND TEMPLATE GRID 


grid-template: 


IMPLICIT GRID 


grid-auto-columns: Effica Sak 

grid-auto-rows: Efies Brak 

grid-auto-flow: EQ lin) Cees 

GUTTERS (GAPS) 

grid-column-gap: [] EFA 

grid-row-gap: [J EFAM 

grid-gap: 

SHORTHAND GRID 

grid: 

Tettoriow| dense] grid-auto-colurnns 

SSRIS oric-auto-rows ff 


ITEM GRIDS 
ed 7A) Pe Nel 


grid-column-start/grid-column-end: Eft [iit] 
grid-row-start/grid-row-end: Effie [its 
grid-column: 

grid-row: 


SGtiiesmircs refer toa numbered or named grid line 


SB rttiissmii span across until grid line 


PLACEMENT SHORTHANDS 
grid-area: 





